<template>
  <div class="priewimage">
    <div class="priewimage-body">
      <div class="priew-image">
        <div class="priew-div">
          <el-image
            :src="formInfo.PathBmp + '?=' + timestamp"
            :style="
              'transform:rotate(' +
              transform.deg +
              'deg) scale(' +
              transform.scale +
              ');transition: transform 0.5s ease;'
            "
          />
          <vab-icon
            :class="
              form.LCDType === '05' && form.VerNo != 2
                ? 'close-circle'
                : 'close-circle-fill'
            "
            icon="close-circle-fill"
            @click="closeFn"
          />
          <div class="priew-button">
            <div class="priew-font">
              <vab-icon
                class="zoom-out-line"
                icon="zoom-out-line"
                @click="handleActions('zoomOut')"
              />
              <vab-icon
                class="zoom-in-line"
                icon="zoom-in-line"
                @click="handleActions('zoomIn')"
              />
              <vab-icon
                class="arrow-go-back-line"
                icon="arrow-go-back-line"
                @click="handleActions('anticlockwise')"
              />
              <vab-icon
                class="arrow-go-forward-line"
                icon="arrow-go-forward-line"
                @click="handleActions('clockwise')"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'Detail',
    components: {},
    props: {
      form: {
        type: Object,
        default: () => {
          return {}
        },
      },
    },
    emits: ['close'],
    data() {
      return {
        formInfo: this.form,
        transform: {
          scale: 1,
          deg: this.form.LCDType === '05' && this.form.VerNo != 2 ? -90 : 0,
          offsetX: 0,
          offsetY: 0,
          enableTransition: false,
        },
        timestamp: new Date().getTime(),
      }
    },
    watch: {
      form(val) {
        this.formInfo = val
      },
    },
    methods: {
      closeFn() {
        this.$emit('close', false)
      },
      handleActions(action, options = {}) {
        const { zoomRate, rotateDeg, enableTransition } = {
          zoomRate: 1.2,
          rotateDeg: 90,
          enableTransition: true,
          ...options,
        }
        switch (action) {
          case 'zoomOut':
            if (this.transform.scale > 0.2) {
              this.transform.scale = Number.parseFloat(
                (this.transform.scale / zoomRate).toFixed(3)
              )
            }
            break
          case 'zoomIn':
            if (this.transform.scale < 7) {
              this.transform.scale = Number.parseFloat(
                (this.transform.scale * zoomRate).toFixed(3)
              )
            }
            break
          case 'clockwise':
            this.transform.deg += rotateDeg
            break
          case 'anticlockwise':
            this.transform.deg -= rotateDeg
            console.log(this.transform.deg)
            break
        }
        this.transform.enableTransition = enableTransition
      },
    },
  }
</script>
<style lang="scss" scoped>
  .priewimage {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;

    .priewimage-body {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.2);
      .priew-image {
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: center;
        justify-items: center;
        height: 100%;
      }
      .priew-div {
        min-height: 380px;
        position: relative;
      }
      .close-circle {
        position: absolute;
        top: 0;
        right: -30%;
        font-size: 44px;
        color: var(--el-text-color-regular);
      }
      .close-circle-fill {
        position: absolute;
        top: -10%;
        right: -10%;
        font-size: 44px;
        color: var(--el-text-color-regular);
      }
      .priew-button {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 282px;
        height: 44px;
        padding: 0 23px;
        background-color: var(--el-text-color-regular);
        border-color: #fff;
        border-radius: 22px;
      }
      .priew-font {
        width: 100%;
        height: 100%;
        text-align: justify;
        cursor: default;
        font-size: 28px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-around;
      }
    }
  }
</style>
